/************** 总容器 ****************/
.wrapper{
    width: 100%;
    background: #f2f2f2;
}

/************** header部分 ****************/
.wrapper header{
    height: 40vw;
    display: flex;
    justify-content: space-between;
    background-image: url("../images/index-header-bg1.jpg");
    padding: 10px;
    background-size: cover;
    align-items: baseline;
    animation: background-slide 8s infinite;
}
@keyframes background-slide {
    0%, 100% {
        background-image: url("../images/index-header-bg1.jpg"); /* 初始背景图片路径 */
        background-position: left top; /* 起始位置：左侧 */
    }
    50% {
        background-image: url("../images/index-header-bg2.jpg"); /* 第二张背景图片路径 */
        background-position: right top; /* 中间位置：右侧 */
    }
}

/* 定位和天气部分 */
.wrapper header .location-and-weather{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 设置location的样式 */
.wrapper header .location-and-weather .location {
    color: white; /* 字体颜色为白色 */
    font-weight: bold; /* 字体加粗 */
    font-family: '微软雅黑', sans-serif; /* 确保字体为微软雅黑，虽然header已经设置了，但这里再次设置以确保 */
    font-size: 4vw;
}

/* 设置weather的样式 */
.wrapper header .location-and-weather .weather {
    color: white; /* 字体颜色为白色 */
    font-family: '微软雅黑', sans-serif; /* 字体为微软雅黑 */
    font-size: 3vw;
}

/* 搜索框的样式 */
.wrapper header .search-box {
    display: inline-flex; /* 或 display: flex; 如果你想要它独占一行 */
    align-items: center; /* 垂直居中子元素 */

    /* 设置边框为实线，你可以根据需要调整颜色和宽度 */
    border: 1px solid #333; /* 示例边框，你也可以设置为透明或根据需要调整 */
    border-radius: 10px;
    width: 55vw;
    height: 6.5vw;

    /* 设置背景色为透明黑 */
    background-color: rgba(0, 0, 0, 0.25); /* 这里的0.5是透明度值，可以根据需要调整 */
    /* 设置一些内边距，以便文本和图标不会紧贴边框 */
    padding: 8px 12px; /* 上右下左的内边距 */
    align-items: center;
    font-size: 3.5vw; /* 示例字体大小 */
    font-family: '微软雅黑', sans-serif;
    color: #fff; /* 文本颜色为白色，以便在透明黑背景上清晰可见 */
    user-select: none;  /*此样式让文本选中状态无效*/
}

/* 如果你想对搜索图标和文本进行更细致的样式调整，可以添加以下CSS规则 */
.wrapper header .search-box i {
    /* 搜索图标的样式 */
    /* 例如：设置图标大小、颜色或与其他元素的间距 */
    margin-right: 8px; /* 图标和文本之间的间距 */
    font-size:4.5vw; /* 图标大小 */
    vertical-align: middle; /* 使图标和文字垂直居中 */
}
/* 为图标设置黑色背景色*/
.wrapper header .icon-background {
    /* 设置为内联块元素或块元素，具体取决于布局需求 */
    display: inline-flex; /* 改为 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center;
    /* 设置背景颜色为黑色，透明度为0.5（可根据需要调整） */
    background-color: rgba(0, 0, 0, 0.25);
    /* 创建一个圆形背景 */
    border-radius: 50%;
    /* 设置宽度和高度，确保是正方形，以便创建圆形 */
    /* 注意：这里使用固定值或百分比值都可以，但需要根据实际情况调整 */
    /* 使用vw单位时，请确保它适合你的设计需求 */
    width: 5vw; /* 或者使用 vw 单位，如 4.5vw，但请确保它看起来合适 */
    height: 5vw; /* 与宽度相同 */
    /* 可选：为图标设置一些内边距，以确保图标不会紧贴背景边缘 */
    padding: 10px; /* 根据需要调整 */
    /* 可选：为图标设置文本对齐方式（但在这里，由于使用了padding，它可能已经居中了） */
    text-align: center;
    /* 可选：使用line-height来垂直居中图标（但在这里可能不需要，因为padding已经足够了） */
    /* 如果需要，可以删除padding并使用line-height来精确控制垂直居中 */
    /* line-height: 60px; （如果去除了padding）*/
    /* 确保图标不会超出背景范围 */
    overflow: hidden;
}
.wrapper header .fa-qrcode{
    font-size:4.5vw;
    color: #fff;
}
.wrapper header .fa-commenting-o{
    font-size:4.5vw;
    color: #fff;
}

/************** 选择票种and查询车票部分 ****************/
.wrapper .ticket{
    background-color: #ffffff;
    width: 96vw;
    display: flex;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: -2vw 2vw 2vw 2vw;
}

.wrapper .ticket .ticket-type{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1vw;
}
.wrapper .ticket .ticket-type a{
    color: #404040;
}
.wrapper .ticket .ticket-type .train-ticket{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32vw;
    height: 10vw;
}
.wrapper .ticket .ticket-type .train-ticket a{
    color: #0099ff;
    font-size: 4.5vw;
    font-weight: bold;
    position: relative;
    padding-bottom: 2vw;
}

.wrapper .ticket .ticket-type .train-ticket a::after {
    content: ''; /* 必须要有内容，否则伪元素不会显示 */
    position: absolute; /* 设置绝对定位，基于父元素定位 */
    bottom: -2px; /* 控制下划线与文字的距离 */
    left: 50%; /* 下划线的起始位置放置在父元素的中心 */
    transform: translateX(-50%);
    width: 45%; /* 下划线宽度 */
    height: 4px; /* 下划线粗细 */
    background-color: #0099ff; /* 下划线颜色 */
}

.wrapper .ticket .ticket-type .plane-ticket{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    font-weight: bold;
    color: #595959;
    width: 32vw;
    height: 10vw;
    background-color: #e6e6e6;
}

.wrapper .ticket .ticket-type .bus-ticket{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    font-weight: bold;
    color: #595959;
    width: 32vw;
    height: 10vw;
    background-color: #e6e6e6;
    border-radius: 0 15px 0 0;
}

.wrapper .ticket .train-ticket-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper .ticket .train-ticket-info .place{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
.wrapper .ticket .train-ticket-info .place::after {
    content: '';
    position: absolute;
    bottom: 0; /* 将下划线放置在容器底部 */
    height: 1px; /* 下划线的粗细 */
    background-color: #f2f2f2; /* 下划线的颜色 */
    width: 85vw;
}
.wrapper .ticket .train-ticket-info .place p{
    flex: 1;
    text-align: center;
    width: 37vw;
    font-size: 6.5vw;
    font-weight: bold;
}
.wrapper .ticket .train-ticket-info .place img{
    width: 8vw;
    height: 8vw;
    margin: 6vw 9vw 2vw 7vw;
}

.wrapper .ticket .train-ticket-info .date{
    display: flex;
    align-items: center;
    height: 14vw;
    position: relative;
}
.wrapper .ticket .train-ticket-info .date .month-day{
    font-size: 5.5vw;
    padding-left: 6vw;
    padding-right: 2vw;
}
.wrapper .ticket .train-ticket-info .date .week-day{
    font-size: 3.5vw;
    color: #666666;
}
.wrapper .ticket .train-ticket-info .date::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* 将下划线放置在容器中心 */
    transform: translateX(-50%); /* 水平居中 */
    height: 1px; /* 下划线的粗细 */
    background-color: #f2f2f2; /* 下划线的颜色 */
    width: 88%; /* 下划线的长度 */
}
.wrapper .ticket .train-ticket-info .button-ticket-query
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2vw;
}
.wrapper .ticket .train-ticket-info .button-ticket-query button {
    background-color: #007fff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    padding: 10px 20px; /* 按钮内边距 */
    border: none; /* 去掉按钮边框 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 5vw; /* 字体大小 */
    border-radius: 5px;
    width: 86%;
    height: 12%;
}

.wrapper .ticket .train-ticket-info .ticket-query-history{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 3vw;
    height: 6vw;
    color: #808080;
}

/************** 功能盒子部分 ****************/
.wrapper .function-box{
    background-color: #ffffff;
    width: 96vw;
    display: flex;
    border-radius: 15px;

    list-style-type: none;
    align-items: center;
    margin: 3vw 2vw 3vw 2vw;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;  /*两行是一个整体居中*/
}

.wrapper .function-box li{
    width: 18vw;
    height: 20vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    user-select: none;
    cursor: pointer;
}
.wrapper .function-box li img{
    width: 11vw;
    height: 11vw;
}
.wrapper .function-box li p{
    font-size: 3.2vw;
    color: black;
}

/************** 热门资讯部分 ****************/
.wrapper .hot-news{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 96vw;
    background-color: #ffffff;
    margin: 0 2vw 3vw 2vw;
    border-radius: 6px;
}

.wrapper .hot-news h3{
    font-family: '方正姚体', sans-serif;
    font-size: 6vw;
    padding-left: 3vw;
    width: 20vw;
}

.wrapper .hot-news a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
    padding: 3vw;
}

.wrapper .hot-news a .left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70vw;
    font-size: 4.5vw;
}
.wrapper .hot-news a .left .gray{
    color: #666666;
}
.wrapper .hot-news a .right{
    font-size: 4.5vw;
    color: #666666;
}

/************** 温馨服务部分 ****************/
.wrapper .warm-service{
    display: flex;
    margin: 0 2vw 3vw 2vw;
    align-items: stretch;
}
.wrapper .warm-service .left{
    display: flex;
    flex-direction: column;
    width: 47vw;
    background-color: #ffffff;
    border-radius: 10px;
}
.wrapper .warm-service .left a{
    display: flex;
    justify-content: space-between;
    color: black;
    padding: 3vw;
    font-size: 4.5vw;
}
.wrapper .warm-service .left a .left{
    width: 90vw;
}
.wrapper .warm-service .left a .left .gray{
    color: #8c8c8c;
    font-size: 4vw;
    margin-top: 1vw;
}
.wrapper .warm-service .left a .right{
    width: 3vw;
    color: #8c8c8c;
}
.wrapper .warm-service .right{
    width: 47vw;
}
.wrapper .warm-service .right a img{
    margin-left: 2vw;
    width: 47vw;
    border-radius: 10px;
}

.wrapper .warm-service .left .service-type{
    display: flex;
    flex-direction: column;
    padding: 0 2vw 2vw 2vw;
}
.wrapper .warm-service .left .service-type li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;
}
.wrapper .warm-service .left .service-type li text{
    display: flex;
    flex-direction: column;

}
.wrapper .warm-service .left .service-type li p{
    font-size: 3.2vw;
    padding-bottom: 1vw;
}
.wrapper .warm-service .left .service-type img{
    width: 12vw;
    height: 12vw;
}

/************** 铁路商城部分 ****************/
.wrapper .railroad-mall{
    display: flex;
    flex-direction: column;
    width: 96vw;
    margin: 0 2vw 3vw 2vw;
    padding-bottom: 14vw;
}
.wrapper .railroad-mall .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .railroad-mall .top p{
    font-size: 5vw;
}
.wrapper .railroad-mall .top a{
    font-size: 3.5vw;
    color: #666666;
}
.wrapper .railroad-mall ul{
    display: flex;
    justify-content: space-around;
}
.wrapper .railroad-mall li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wrapper .railroad-mall li img{
    width: 46vw;
    height: 46vw;
    margin: 1vw;
}
.wrapper .railroad-mall li p{
    font-size: 4.5vw;
    margin-top: 0.5vw;
}

/************** 底部菜单部分 ****************/
.wrapper .footer{
    width: 100vw;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: white;

    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}
.wrapper .footer li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: black;
    user-select: none;
    cursor: pointer;
}
.wrapper .footer li p{
    font-size: 2.8vw;
}
.wrapper .footer li i{
    font-size: 5vw;
}
.wrapper .footer .index{
    color: #007fff;
}